\n\n프론트 엔드 면접 질문용 공부 후 정리 자료입니다. 정확하지 않을 수 있으니 꼭 다시 책이나 자료를 참고하여 공부하세요
\n
CSS는 중복 선언을 허용하며 중복되는 경우 아래와 같은 우선순위로 처리
\n\n부모 > 자식 관계에서 자식에 float가 추가되어있다면 부모에
\n\\1. overflow:hidden 설정
\n\\2. height 값 설정
\n\\3. 요소 아래 clear: both 속성 추가
\n\\4. 가상 요소(::after, ::before)를 이용하여 clear: both 속성 추가
\n하여 문제를 해결할 수 있습니다. 클리어링 기법을 이용하는 이유는 자식에 float 속성을 주는 경우 자식이 부모 요소의 높이를 인지하지 못하는 문제가 있어서 이를 해결하고자 클리어링 기법을 이용합니다.
\n.parent { overflow: hidden; } .parent::after { content:\"\"; display:block; clear:both; } .clear { clear:both; }
\n6. 박스 모델(box model)이 무엇이며, 브라우저에서 어떻게 동작하는지 설명해주세요.
\n박스 모델은 브라우저에 배치하기 위한 규칙이며 W3C model과 IE model이 있는데 두 가지 박스 모델은 차이점이 있다. W3C 모델은 content 영역이 width에 해당하지만 IE 모델은 content + padding + border가 포함된다.
\n8. 요소(position) 배치 방법과 차이점에 대해 설명해주세요.
\n영역의 위치를 설정하는 속성입니다.
\n- static
\n기본값입니다. 별도의 변경없이 문서 흐름에 따라 요소들이 배치됩니다.
\n- relative
\n상대적인 위치로 설정됩니다. 이 속성을 설명할 때 저는 현 위치에 원본을 그대로 두고 복제본을 설정한다고 합니다. 이런 특성으로 인해 주변 요소들은 영향 받지 않습니다.
\n- absolute
\n절대적인 위치로 설정됩니다. relative와 다르게 기존 위치에서 벗어나 설정합니다. 기존 위치에서 벗어나므로 주변 요소들이 영향을 받습니다.
\n- fixed
\n브라우저 창을 기준으로 위치를 설정합니다.
\nTip.
\n위치 속성과 관련하여 자주 사용하는 패턴이 있다. 경우에 따라 부모 요소를 기준으로 자식 요소의 위치를 변경해야하는 경우가 있다. 그런 경우 부모 요소에 position: relative, 자식요소에 position: absolute를 사용하면 된다.
\n9. flexbox와 grid에 대해 아는 것이 있다면 설명해주세요.
\nCSS 공식적으로 지원하는 레이아웃과 관련된 속성입니다. 기존에 여러 trick(트릭)으로 구현한 기능들을 손쉽게 구현할 수 있습니다. 예를 들면 요소를 상하좌우 중앙에 위치시키는 기능을 flexbox로 쉽게 구현할 수 있습니다.
\n\\10. “reset” CSS와 “normalize” CSS에 대해 아는 것이 있다면 설명해주세요.
\nreset.css
\n브라우저마다 제조사 스타일(CSS) 값이 설정되어있습니다. 각 브라우저마다 h1의 크기나 input의 모양이 다른건 이런 이유 때문입니다. 이런 브라우저간의 차이를 모두 동일하게 초기화하기 위해 reset.css를 사용합니다. 단점으로는 모든 태그가 초기화되어 크기가 다르기에 모든 태그에 각 각 css를 선언해야합니다. (0에서부터 시작해야합니다.)
\nnormalize.css
\n기본 스타일을 브라우저간 일관성을 유지하도록 돕는 css 파일이다. browser마다 조금씩 다르게 보이는 것들이 있는데, 그것을 하나의 기준으로 통일하여 모든 brower에서 동일한 스타일을 보이게 하는 것이다. reset.css 보다는 조금 더 완성된 형태에서 프로젝트를 시작할 수 있습니다. (유용한 기본값을 보존합니다.)
\n10. CSS 스프라이트(CSS Sprites)를 설명하고, 페이지나 사이트를 어떻게 향상시키는지 설명해주세요.
\nCSS Sprite 기법은 여러 개의 이미지를 하나로 모아 이미지 파일의 요청 횟수를 줄이는 방법이다. 3개의 이미지를 하나로 압축하면 용량이 더 커질 것이라고 생각하지만 그렇지 않기에 용량을 줄이는 효과도 있다.
\n11. 대체 이미지(Image Replacement)를 사용해야 할 때, 선호하는 기술과 언제 사용할 수 있는지 설명하세요.
\n.blind { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; }
\n자세한 내용은 아래 글을 참고하자.
\n![\"img\"](\"https://dthumb-phinf.pstatic.net/?src=%22https%3A%2F%2Fcphinf.pstatic.net%2Fmooc%2F20190625_114%2F1561452796322SzQ8Q_JPEG%2FvMOZBkZ8rFzXM8fnWMwl.jpg%22&type=ff500_300\")
[[LECTURE] 2) 요소 숨김 처리 : edwith들어가기 전에 CSS로 대체 텍스트를 화면에서 숨기는 방법은 여러가지가 있습니다. 몇가지 방법들을 살펴보고 사용하지 말아야 할 속성들과 주의해야할 점들을 알아보도록 하겠습니다. … - 양동현www.edwith.org](https://www.edwith.org/boostcourse-ui/lecture/47663)
12. 컨텐츠를 안보이게 하는 기술들의 차이점을 설명해주세요. (추가적으로 스크린 리더에 접근 가능한 방법은?)
\n\\1. display: none;
\n영역 자체가 없어지면서 화면에 보이지 않음
\n\\2. visibility: hidden;
\n영역 자체가 있지만 화면에 보이지 않음.
\n\\3. text-indent, position 등에 음수값 설정
\n\\4. 앞서 설명한 .blind 클래스
\n13. 효율적인 CSS를 작성하기 위해 노력한 것에 대해 설명해주세요.
\n\\1. 디자인 시안을 분석하여 공통 부분을 추출하여 클래스화할 수 있도록 노력합니다.
\n\\2. BEM과 같은 CSS 방법론을 도입합니다.
\n\\3. 최적의 마크업합니다.
\n\\4. 기타
\n14. DOCTYPE에 대해 설명해주세요.
\nHTML 문서에 대한 정보를 나타냅니다.
\n15. 컨텐츠를 가운데 오게 하는 방법에 대해 설명해주세요.
\n방법 1.
\n요소 성질을 테이블로 변환하는 방법, 테이블로 레이아웃을 만드는건 다소 이전 방법이다.
\n- 부모
\ndisplay: table;
\n- 자식
\ndisplay: table-cell; text-align: center; vertical-align: middle;
\n방법 2.
\n- 부모
\nposition: relative;
\n- 자식
\nposition: absolute; top: 50%; left: 50%; margin-top: -(자식 요소 높이 값의 절반) margin-left: -(자식 요소 너비 값의 절반)
\n방법 3.
\n- 부모
\nposition: relative;
\n- 자식
\nposition: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);
\n방법 4.
\n- 부모
\nheight: (부모 높이 값); display: flex; justify-content: center; align-items: center;
\n- 자식
\n별도 설정 없음
\n16. 반응형과 적응형 웹에 대해 설명해주세요.
\n- 반응형
\n전적으로 클라이언트에서 변화를 처리
\n- 적응형
\n서버에서 웹에 접근하는 디바이스를 체크하여 디바이스에 최적화된 마크업 호출
\n17. box-sizing: border-box에 대해서 설명해주세요.
\n- 요소가 width를 계산 할 때 어디까지 포함할지 설정하는 속성입니다. 기본값은 content-box이며 컨텐츠 크기만 고려합니다.
\n- box-sizing: border-box로 설정시 width 값에 border와 padding 값도 포함합니다.
\n17. 시맨틱 마크업에 대해서 설명해주세요.
\n“의미론적” 마크업을 의미합니다. 관련 태그로